<template>
  <div class="bangumi" @click="toBangumi">
    <div class="cover">
      <img class="img" v-lazy="pic+coverSize" />
      <div class="count">
        <span>{{ view | formatNumber }}观看</span>
        <span>{{ danmaku | formatNumber }}弹幕</span>
      </div>
    </div>
    <div class="title">{{ title }}</div>
  </div>
</template>

<script>
import { formatNumber } from '@/filters/filters.js'
export default {
  name: 'PostBangumi',
  props: {
    aid: {
      type: Number
    },
    episodeId: {
      type: Number
    },
    title: {
      type: String
    },
    pic: {
      type: String
    },
    coverSize: {
      type: String,
      default: '@702w_394h'
    },
    view: {
      type: Number
    },
    danmaku: {
      type: Number
    }
  },
  filters: {
    formatNumber
  },
  methods: {
    toBangumi () {
      this.$router.push({ name: 'bangumi', params: { id: 'ep' + this.episodeId } })
    }
  }
}
</script>

<style lang="scss" scoped>
  .bangumi{
    padding: {
      left: 10px;
      right: 10px;
    }
    margin-bottom: 10px;
    .cover{
      @include cover(702, 394, 4px);
      .count {
        position: absolute;
        left: 0;
        bottom: 0;
        display: flex;
        align-items: flex-end;
        width: 100%;
        height: 56px;
        padding: {
          left: 10px;
          bottom: 10px;
        }
        box-sizing: border-box;
        font-size: 12px;
        color: $color-white;
        background-image: linear-gradient(0deg, rgba(0,0,0,0.4) 0%, transparent 100%);
        span{
          margin-right: 10px;
        }
      }
    }
    .title{
      margin-top: 6px;
      font-size: 14px;
      @include max-lines(1);
    }
  }
</style>
